Angular Material Slider একটি ইন্টারঅ্যাকটিভ উপাদান, যা ব্যবহারকারীদের মান নির্বাচন করতে একটি স্লাইডিং স্কেল প্রদান করে। এটি একটি সাধারণ এবং শক্তিশালী উপাদান, যা মূলত সংখ্যা বা মান পরিবর্তন করার জন্য ব্যবহার করা হয়। Angular Material এর MatSlider কম্পোনেন্টটি আপনাকে একটি সুন্দর এবং আধুনিক স্লাইডার তৈরি করতে সহায়তা করে, যা Material Design গাইডলাইন অনুসরণ করে।

স্লাইডার ব্যবহারের জন্য প্রয়োজনীয় স্টেপ

১. Angular Material ইন্সটল এবং সেটআপ

প্রথমে Angular Material ইন্সটল করা থাকতে হবে। যদি Angular Material ইতিমধ্যেই ইন্সটল না করা থাকে, তাহলে নিচের কমান্ডটি ব্যবহার করে এটি ইন্সটল করুন:

ng add @angular/material

২. MatSliderModule ইমপোর্ট করা

এখন MatSliderModule ব্যবহার করতে হবে, যা স্লাইডার কম্পোনেন্ট সরবরাহ করে। এটি আপনার app.module.ts ফাইলে ইমপোর্ট করুন:

import { MatSliderModule } from '@angular/material/slider';

@NgModule({
  imports: [
    MatSliderModule
  ]
})
export class AppModule { }

স্লাইডার HTML কোড

এখন আপনি MatSlider কম্পোনেন্ট ব্যবহার করে স্লাইডার তৈরি করতে পারবেন। নিচে একটি সাধারণ উদাহরণ দেয়া হলো:

<mat-slider min="1" max="100" step="1" value="50"></mat-slider>

এখানে:

• min: স্লাইডারের সর্বনিম্ন মান।
• max: স্লাইডারের সর্বোচ্চ মান।
• step: স্লাইডার চলানোর সময় কী পরিমাণ মান পরিবর্তন হবে।
• value: ডিফল্ট মান, যখন স্লাইডার লোড হয়।

এটি একটি সাধারণ স্লাইডার তৈরি করবে, যা 1 থেকে 100 পর্যন্ত মান গ্রহণ করতে পারে এবং প্রতি একক পরিমাণে মান পরিবর্তন করবে।

স্লাইডার সাথে টাইপস্ক্রিপ্ট যুক্ত করা

আপনি স্লাইডার এর মান টাইপস্ক্রিপ্টে ব্যবহার করতে চাইলে, Angular এর ngModel ব্যবহার করতে পারেন। এতে স্লাইডারের মান ডাইনামিকভাবে টাইপস্ক্রিপ্ট ভেরিয়েবল এর সাথে সংযুক্ত হবে।

<mat-slider [(ngModel)]="sliderValue" min="1" max="100" step="1" value="50"></mat-slider>
<p>Slider Value: {{ sliderValue }}</p>

এখানে, sliderValue একটি টাইপস্ক্রিপ্ট ভ্যারিয়েবল যা স্লাইডার এর মান ধারণ করবে। এর মান পরিবর্তন হলে তা HTML পেজে রিয়েল-টাইমে প্রদর্শিত হবে।

টাইপস্ক্রিপ্ট কোড:

import { Component } from '@angular/core';

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent {
  sliderValue = 50;  // ডিফল্ট মান
}

এখন, স্লাইডারটি মুভ করলে sliderValue ভ্যারিয়েবলটি আপডেট হবে এবং HTML পেজে তা প্রদর্শিত হবে।

স্লাইডার কাস্টমাইজেশন

১. স্লাইডারের স্টাইল পরিবর্তন

Angular Material এর MatSlider কম্পোনেন্ট ডিফল্টভাবে একটি সুন্দর ডিজাইন সরবরাহ করে, তবে আপনি চাইলে এটি কাস্টমাইজ করতে পারেন।

mat-slider {
  width: 100%;
  margin: 20px 0;
}

এটি স্লাইডারের প্রশস্ততা এবং মার্জিন কাস্টমাইজ করবে।

২. স্লাইডার লেবেল (Label) এবং টুলটিপ

আপনি চাইলে স্লাইডারের মান দেখতে একটি টুলটিপ যোগ করতে পারেন। এর জন্য matTooltip ব্যবহার করা হয়।

<mat-slider [(ngModel)]="sliderValue" min="1" max="100" step="1" value="50" matTooltip="Value: {{ sliderValue }}"></mat-slider>

এটি স্লাইডারের মান পরিবর্তনের সময় একটি টুলটিপ দেখাবে।

৩. স্লাইডারের সিঙ্ক্রোনাইজেশন

আপনি একাধিক স্লাইডার তৈরি করতে পারেন এবং তাদের মান সিঙ্ক্রোনাইজ করতে পারেন।

<mat-slider [(ngModel)]="sliderValue" min="0" max="100" step="1"></mat-slider>
<mat-slider [(ngModel)]="sliderValue" min="0" max="100" step="1"></mat-slider>

এখানে, দুইটি স্লাইডারের মান একই থাকবে কারণ তারা একে অপরের সাথে সংযুক্ত।

৪. স্লাইডারের ডিজাইন পরিবর্তন

Angular Material স্লাইডারটির জন্য আপনি একাধিক ডিজাইন অপশন কাস্টমাইজ করতে পারেন, যেমন tickInterval, thumbLabel, vertical ইত্যাদি।

• tickInterval: স্লাইডারে টিক মার্কস দেখাবে।
• thumbLabel: স্লাইডার থাম্বের উপরে মান প্রদর্শন করবে।
• vertical: স্লাইডারটিকে উল্লম্বভাবে প্রদর্শন করবে।

<mat-slider [(ngModel)]="sliderValue" min="0" max="100" step="1" tickInterval="10" thumbLabel vertical></mat-slider>

Angular Material Slider একটি শক্তিশালী এবং ব্যবহারকারী-বান্ধব কম্পোনেন্ট, যা ব্যবহারকারীদের নির্দিষ্ট মান সিলেক্ট করতে সাহায্য করে। আপনি এটি ngModel বা FormControl এর মাধ্যমে টাইপস্ক্রিপ্ট ভেরিয়েবলের সাথে যুক্ত করতে পারেন। স্লাইডারটি কাস্টমাইজ করার মাধ্যমে আপনি একটি আধুনিক, রেসপন্সিভ এবং ইউজার-বান্ধব ইন্টারফেস তৈরি করতে পারবেন। Angular Material স্লাইডার ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাক্টিভ এবং আধুনিকভাবে ডিজাইন করতে পারেন।

Angular Material এ রেঞ্জ স্লাইডার তৈরি করা খুবই সহজ এবং এটি ব্যবহারকারীদের জন্য একটি সুন্দর এবং ইন্টারেক্টিভ উপায় হিসেবে কাজ করে। রেঞ্জ স্লাইডার সাধারণত দুটি মানের মধ্যে একটি মান নির্বাচন করতে ব্যবহৃত হয়, যেমন—কম এবং বেশি। অ্যাঙ্গুলার ম্যাটেরিয়াল mat-slider কম্পোনেন্ট ব্যবহার করে সহজেই রেঞ্জ স্লাইডার তৈরি করা যায়।

রেঞ্জ স্লাইডার তৈরি করার ধাপ

১. Angular Material মডিউল ইমপোর্ট করা

প্রথমে, আপনাকে MatSliderModule মডিউলটি অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করা যাবে।

import { MatSliderModule } from '@angular/material/slider';

@NgModule({
  imports: [
    MatSliderModule
  ]
})
export class AppModule { }

২. HTML ফাইলে রেঞ্জ স্লাইডার ব্যবহার করা

mat-slider কম্পোনেন্ট ব্যবহার করে একটি রেঞ্জ স্লাইডার তৈরি করা যেতে পারে। এটি min, max, এবং step প্রপার্টি সহ কাস্টমাইজ করা যায়।

<mat-slider min="1" max="100" step="1" value="50"></mat-slider>

এখানে:

• min: স্লাইডারের সর্বনিম্ন মান
• max: স্লাইডারের সর্বোচ্চ মান
• step: স্লাইডারের প্রতিটি পদক্ষেপের মান
• value: ডিফল্ট মান, যা স্লাইডারের প্রাথমিক অবস্থান নির্ধারণ করে

৩. স্লাইডার মান ট্র্যাক করা

স্লাইডারের মান ট্র্যাক করার জন্য আপনি ngModel ডিরেকটিভ ব্যবহার করতে পারেন। এটি আপনাকে স্লাইডারের মান পরিবর্তন হলে তা আপনার টাইপস্ক্রিপ্ট ফাইলে ধারণ করতে সাহায্য করবে।

<mat-slider min="1" max="100" step="1" [(ngModel)]="sliderValue"></mat-slider>
<p>Selected value: {{ sliderValue }}</p>

এখানে, [(ngModel)]="sliderValue" স্লাইডারের মান sliderValue নামক টাইপস্ক্রিপ্ট ফাইলে ধারণ করবে এবং প্যারাগ্রাফে প্রদর্শিত হবে।

৪. টাইপস্ক্রিপ্ট ফাইলে মান ডিফাইন করা

এখন, টাইপস্ক্রিপ্ট ফাইলে sliderValue নামক একটি ভেরিয়েবল ডিফাইন করুন।

import { Component } from '@angular/core';

@Component({
  selector: 'app-slider-example',
  templateUrl: './slider-example.component.html',
  styleUrls: ['./slider-example.component.css']
})
export class SliderExampleComponent {
  sliderValue: number = 50;  // ডিফল্ট মান
}

এখন, আপনি যখন স্লাইডারটি হেলানো হবে, তখন sliderValue এর মান পরিবর্তিত হবে এবং তা HTML এ প্রদর্শিত হবে।

রেঞ্জ স্লাইডার কাস্টমাইজেশন

১. স্লাইডার স্টাইলিং

Angular Material এর রেঞ্জ স্লাইডারকে কাস্টমাইজ করার জন্য CSS ব্যবহার করা যায়। আপনি স্লাইডারের থাম্ব, ট্র্যাক এবং অন্যান্য অংশ স্টাইল করতে পারেন।

mat-slider {
  width: 100%;
}

.mat-slider-thumb {
  background-color: #4caf50; /* থাম্বের রং পরিবর্তন */
}

.mat-slider-track-fill {
  background-color: #3f51b5; /* ট্র্যাকের পূর্ণ অংশের রং */
}

২. ডিসেবল স্লাইডার

আপনি চাইলে স্লাইডারটি ডিজেবল করতে পারেন, যাতে ব্যবহারকারী সেটি ইন্টারঅ্যাক্ট করতে না পারে।

<mat-slider min="1" max="100" step="1" value="50" disabled></mat-slider>

৩. ডিসক্রিট স্লাইডার (Discrete Slider)

ডিসক্রিট স্লাইডার ব্যবহার করলে স্লাইডারটি নির্দিষ্ট মানের মধ্যে সীমাবদ্ধ থাকবে, এবং এটি মানের মধ্যে কেবল নির্দিষ্ট কদমে পরিবর্তিত হবে। এটি tickInterval প্রপার্টি দ্বারা কনফিগার করা যায়।

<mat-slider min="1" max="100" step="1" [(ngModel)]="sliderValue" tickInterval="10"></mat-slider>

এখানে tickInterval="10" স্লাইডারের প্রতি দশমিক পরিমাণে মান পরিবর্তন করবে।

৪. Vertical Slider (আনুভূমিক পরিবর্তে উল্লম্ব স্লাইডার)

ডিফল্টভাবে, Angular Material এর স্লাইডার হরিজেন্টাল (আনুভূমিক) থাকে। তবে আপনি চাইলে স্লাইডারটি উল্লম্বও করতে পারেন।

<mat-slider min="1" max="100" step="1" value="50" vertical></mat-slider>

এটি স্লাইডারটি উল্লম্বভাবে দেখাবে, যা ব্যবহারকারীকে উপর থেকে নিচে স্লাইড করতে সক্ষম করবে।

Angular Material এর mat-slider কম্পোনেন্ট ব্যবহার করে সহজেই রেঞ্জ স্লাইডার তৈরি করা যায়, যা ব্যবহারকারীদের জন্য একটি ইন্টারেক্টিভ উপায় হিসেবে কাজ করে। আপনি এটি বিভিন্ন কাস্টমাইজেশন অপশন যেমন min, max, step, tickInterval, এবং vertical প্রপার্টি ব্যবহার করে কাস্টমাইজ করতে পারেন। এটি আপনার অ্যাপ্লিকেশনে আরও ইউজার ফ্রেন্ডলি এবং ইন্টারেক্টিভ ইন্টারফেস তৈরি করতে সাহায্য করবে।